<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 300px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }
        #d2{
            width: 100px;
            height: 100px;
            border: 1px solid green;
            /*如果使用了内边距，会影响元素的宽和高*/
            padding-top: 50px;
            padding-left: 50px;
            /*添加了下面的样式后，外边距就不再影响所占的宽高*/
            box-sizing: border-box;
        }
        body{
            margin: 0;
        }
        *{
            margin: 0;
            padding: 0;
        }
        p,ul,body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="d2">内边距</div>
    <div id="d1">边框测试</div>
    <h1>这是h1标题</h1>
    <hr>
    <p>这是p标签</p>
    <hr>
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
    <input type="text">
</body>
</html>
